<template>
  <div style="margin-left: 20px">
    <div  style="color: #f30d0d;">----------- 选择器 -----------</div>
    <span  style="color: #f30d0d;"> 基本描述: </span>
    <p>基础用法:v-model的值为当前被选中的el-option的 value 属性值, multiple支持多选 ，如果 Select 的绑定值为对象类型，请务必指定 value-key 【:key】 作为它的唯一性标识。</p>
    <p>在el-option中，设定disabled值为 true，即可禁用该选项 </p>
    <p>为el-select设置disabled属性，则整个选择器不可用</p>

    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled">
      </el-option>
    </el-select>
    <el-button type="success"  icon="el-icon-check" >{{this.value}} </el-button>


    <br>
    <br>
    <p><span  style="color: #f30d0d;">自定义模板:  </span>将自定义的 HTML 模板插入el-option的 slot 中即可</p>
     <el-select v-model="value2" placeholder="请选择">
      <el-option
        v-for="item in cities"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
      </el-option>
    </el-select>
    <el-button type="success"  icon="el-icon-check" >{{this.value2}} </el-button>


    <br>
    <br>
    <p><span  style="color: #f30d0d;">分组: </span>使用el-option-group对备选项进行分组，它的label属性为分组名</p>
    <el-select v-model="value3" placeholder="请选择">
      <el-option-group
        v-for="group in options2"
        :key="group.label"
        :disabled="group.disabled"
        :label="group.label">
        <el-option
          v-for="item in group.options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-option-group>
    </el-select>
    <el-button type="success"  icon="el-icon-check" >{{this.value3}} </el-button>

  <br>
  <br>
  <p>  <span  style="color: #f30d0d;"> 收索可选项:  </span>
    为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。
    如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。
    filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。</p>
  <el-select v-model="value4" filterable placeholder="请选择">
    <el-option
      v-for="item in options4"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  
  
  <br>
  <br>
  <p>  <span  style="color: #f30d0d;"> 远程收索:  </span>
      一、为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。
      remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，
      如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。
  </p>
  <p>二、使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，
    在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。</p>
  <el-select
    v-model="value5"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option
      v-for="item in options5"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

<!--  allow-create -->
  <el-select
    v-model="value6"
    allow-create
    multiple
    filterable
    default-first-option
    placeholder="请选择文章标签">
    <el-option
      v-for="item in options6"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  
  </div>
</template>

<script>
    export default {
    data: () => ({
       options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶',
          disabled: true
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],


        value: '',


         cities: [{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }],

        value2:'',


        options2: [{
          label: '热门城市',
          disabled:true,
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
          label: '城市名',
          options: [{
            value: 'Chengdu',
            label: '成都'
          }, {
            value: 'Shenzhen',
            label: '深圳'
          }, {
            value: 'Guangzhou',
            label: '广州'
          }, {
            value: 'Dalian',
            label: '大连'
          }]
        }],
      value3:'Guangzhou',
      options4 : [],
      value4:'',


      options5 : [],
      value5:'',
      list: [],
      loading: false,
      states: ["Alabama", "Alaska", "Arizona",
      "Arkansas", "California", "Colorado",
      "Connecticut", "Delaware", "Florida",
      "Georgia", "Hawaii", "Idaho", "Illinois",
      "Indiana", "Iowa", "Kansas", "Kentucky",
      "Louisiana", "Maine", "Maryland",
      "Massachusetts", "Michigan", "Minnesota",
      "Mississippi", "Missouri", "Montana",
      "Nebraska", "Nevada", "New Hampshire",
      "New Jersey", "New Mexico", "New York",
      "North Carolina", "North Dakota", "Ohio",
      "Oklahoma", "Oregon", "Pennsylvania",
      "Rhode Island", "South Carolina",
      "South Dakota", "Tennessee", "Texas",
      "Utah", "Vermont", "Virginia",
      "Washington", "West Virginia", "Wisconsin",
      "Wyoming"],

      options6 : [],
      value6:'',

    }),
    created(){
      this.options4 = this.options
       this.options6 = this.options
    },
    mounted() {
      this.list = this.states.map(item => {
        return { value: `value:${item}`, label: `label:${item}` };
      });
    },

    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options5 = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      }
    },


  }
</script>

<style>
  
</style>